<!--
* @FileDescription: 实时曲线页面
* @Author: yuec621@outlook.com
* @Date: 2024-12-19 12:45:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:45:27
-->
<template>
    <div class="pagestyle">
        <noDataChartCom v-if="state.nodataShow" @toolChange="toolChange" 
        :searListData="state.searList"
            :lineConParams="state.lineConParams"></noDataChartCom>
        <div v-else>
            <div class="cardBox"
                :style="{backgroundColor:state.attrObj&&state.attrObj.chartBg?state.attrObj.chartBg:'#fff'}">
                <toolCom @toolChange="toolChange" :showToolList="state.showToolList" :lineConParams="state.lineConParams"
                    :searList="state.searList" :tabList="state.configTabList" :totaltoolList="state.totaltoolList"
                    :chartType="1" :timeRange="state.timeRangevalue" :lengedList="state.lengedList">
                    <template v-slot:toolComTitle>
                        配置
                    </template>
                </toolCom>
                <realChartCom :nameListstatus="state.nameListstatus" :statusList="state.statusList"
                    :chartList="state.chartList" :attrObj="state.attrObj" :splitNumber="state.splitNumber"
                    :symbolShow="state.symbolShow" :toolType="state.toolType"
                    ></realChartCom>
            </div>
            <div class="cardBox">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <chartTable :curdShow="true" :tableheadsValue="state.tableheadsValue" :tabledata="state.tabledata"
                            :listSS="state.listSS">
                            <template v-slot:tabBoxList="row">
                                <span class="hover" v-for="item in state.tabList" :class="item.type==state.type?'bg':''"
                                    @click="tabClick(item)">
                                    {{ item.name }}({{ item.num }})</span>
                            </template>
                            <template v-slot:listSS="{row,field}">
                                <span v-if="field=='alarmStartValue'"
                                    style="color: rgba(255, 85, 85, 1);font-size: 16px;font-weight: 700;">
                                    {{row.alarmStartValue}}
                                </span>
                                <span v-if="field=='cutStartValue'"
                                    style="color: rgba(255, 85, 85, 1);font-size: 16px;font-weight: 700;">
                                    {{row.cutStartValue}}
                                </span>
                            </template>
                            <template v-slot:opraCurdBtn="row">
                                <el-button type="text" @click="lookLineClick(row.row)">查看曲线</el-button>
                            </template>
                        </chartTable>
                    </el-col>
                 
                </el-row>
            </div>
        </div>
    </div>
</template>
<script setup>
    import list_controller from "@/components/commonCom/list_controller";
    import toolCom from "./chartCom/toolCom.vue";
    import realChartCom from "./chartCom/realChartCom.vue"
    import chartTable from "./chartCom/chartTable.vue";
    import noDataChartCom from "./chartCom/noDataChartCom.vue";
    import {
        computed,
        onMounted,
        reactive
    } from "vue";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import {} from '@/api/config'
    import dayjs from 'dayjs'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP
    let state = reactive({
        nodataShow:false,
        timeRange: [],
        chartList: {},
        symbolShow: false,
        chartLength: 0,
        alarmList: {},
        showToolList: false, //查看曲线展示前一条后一条
        splitNumber: 10,
        // 模拟量
        tabledata: [],
        tableheadsValue: computed(() => table_headers.hisAlarmLineTable),
        tabList: [{
            type: 0,
            name: '报警',
            num: 0,
            tableheads: computed(() => table_headers.hisAlarmLineTable),
            dataUrl: '/pointData/hisAlarmTable',
            tableData: []
        }, {
            type: 1,
            name: '断电',
            num: 0,
            tableheads: computed(() => table_headers.hisCutLineTable),
            dataUrl: '/pointData/hisCutTable',
            tableData: []
        }, {
            type: 2,
            name: '馈电',
            num: 0,
            tableheads: computed(() => table_headers.hisFeedLineTable),
            dataUrl: '/pointData/hisFeedTable',
            tableData: []
        }],
        type: 0,
        // 开关量
        tabledatatwo: [],
        tableheadsValuetwo: computed(() => table_headers.hisSwitchStateTable),
        tabListtwo: [],
        typetwo: 0,
        lineConParams: {
            // 模拟量
            pointUrl: '/simulate/history/listSimulatePoints', //获取测点列表
            addTemSave: '/simulate/template/add', //新增模板接口
            tempList: '/simulate/template/list', //模板列表接口
            delTemp: '/simulate/template/del', //删除模板接口
            hisSearchSave: '/simulate/history/add', //新增历史查询接口
            hisSearchList: '/simulate/history/list', //查询历史查询接口
            hisSearchDel: '/simulate/history/del', //删除历史查询接口
            // 开关量
            pointUrltwo: '/combination/listSwitch', //获取测点列表
            addTemSavetwo: '/switch/template/add', //新增模板接口
            tempListtwo: '/switch/template/list', //模板列表接口
            delTemptwo: '/switch/template/del', //删除模板接口
            hisSearchSavetwo: '/point/history/add', //新增历史查询接口
            hisSearchListtwo: '/point/history/list', //查询历史查询接口
            hisSearchDeltwo: '/point/history/del', //删除历史查询接口
        },
        configTabList: [{
            type: 1,
            name: '模拟量'
        }, {
            type: 11,
            name: '开关量'
        }, {
            type: 2,
            name: '曲线属性'
        }],
        pointIdList: [],
        searList: [{
            label: '时间范围',
            id: 'time',
            descList: [{
                label: '时间范围',
                type: 'timeRangepage',
                col: 24,
                bindData: undefined,
                field: 'timeRange'
            }]
        }, {
            label: '测点信息',
            id: 'address',
            descList: [{
                label: '测点精度',
                type: 'radio',
                col: 24,
                bindData: false,
                options: [{
                    label: '量程',
                    value: false
                }, {
                    label: '自适应',
                    value: true
                }],
                field: 'flag',
            }, {
                label: '传感器类别',
                type: 'selecttwo',
                col: 24,
                bindData: undefined,
                options: [],
                optionstwo: [],
                field: 'sensorName',
            }]
        }, {
            label: '地点区域',
            id: 'area',
            descList: [{
                label: '所在区域',
                type: 'cascadercheckStrictly',
                col: 24,
                bindData: undefined,
                options: [],
                field: ['areaId', 'areaName'],
                fieldsearch: ['areaId', 'areaName'],
                props: {
                    children: 'childList',
                    value: 'id',
                    label: 'areaName',
                    checkStrictly: true,
                    emitPath: false
                }
            }, {
                label: '安装地点',
                type: 'select',
                col: 24,
                bindData: undefined,
                options: [],
                field: 'placeName',
            }]
        }],
        statusList: {},
        nameListstatus: [],
        nameListstatusList: [],
        totaltoolList: [{
            name: '播放',
            icon: 'bofang',
            type: 15,
            selname: '取消播放',
            show: true
        },{
            name: '显示圆点',
            icon: 'yuandian',
            type: 4,
            selname: '取消显示圆点',
            show: true
        }, {
            name: '标尺',
            icon: 'biaochi',
            type: 5,
            selname: '取消标尺',
            show: true
        }, {
            name: '游标',
            icon: 'youbiao',
            type: 6,
            selname: '取消游标',
            show: true
        }, {
            name: 'Y轴范围',
            icon: 'Yzhoufanwei',
            type: 14,
            selname: '取消Y轴范围',
            show: true
        }],
        attrList: [],
        attrObj: undefined,
        listSS: [{
            field: "alarmStartValue"
        }, {
            field: "cutStartValue"
        },{
            field: "pointValueStr"
        }],
        timeRangevalue:[],
        lengedList:[]
    })

    // 获取曲线图数据
    function getList(startTime, endTime) {
        axios.post('/pointData/simulateLine', {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime,
        }).then(res => {
            if (res.data.hisSimulateLines.length > 0) {
                res.data.hisSimulateLines.forEach(item => {
                    state.attrList.forEach(itemsub => {
                        if (item.pointId == itemsub.pointId) {
                            item.attrObj = itemsub
                        }
                    })
                })
            }
            state.chartList = res.data
        })
    }
    // 获取状态图数据
    function getstatusList(startTime, endTime) {
        axios.post('/pointData/hisSwitchLine', {
            pointIds: ["011D05", "011D06", "011D07", "003D01"],
            queryStartTime: startTime,
            queryEndTime: endTime,
        }).then(res => {
            if (res.data.switchPointLines && res.data.switchPointLines.length > 0) {
                res.data.switchPointLines.forEach(item => {
                    state.nameListstatusList.forEach(itemsub => {
                        if (item.pointId == itemsub.pointId) {
                            itemsub.curlSwitchNodes.forEach(itemthe => {
                                item.switchStateLines.forEach(itemfour => {
                                    if (itemthe.id == itemfour.stateValue) {
                                        itemfour.name = itemthe.connotation
                                    }
                                })
                            })
                        }
                    })
                })
            }
            state.statusList = res.data
        })
    }
    // 头部操作工具栏事件
    async function toolChange(val) {
        state.toolType = val.type
        if (val.type == 'dateType') {
            if (val.data && val.data.length > 0) {
                let startTime = dayjs(val.data[0]).format('YYYY-MM-DD HH:mm:ss')
                let endTime = dayjs(val.data[1]).format('YYYY-MM-DD HH:mm:ss')
                state.timeRangevalue = [startTime, endTime]
                if (state.pointIdList.length > 0) {
                    localStorage.setItem('compareChart',JSON.stringify(
                        {pointIds:state.pointIdList,startTime:startTime,
                        endTime:endTime,
                        lengedList:state.lengedList}))
                    await getList(startTime, endTime)
                    await getstatusList(startTime, endTime)
                    await tableList(startTime, endTime)
                    await getTableList(startTime, endTime)
                } else {
                    proxy.$modal.msgWarning('请选择所要查询的测点编号!');
                }
            }
        } else if (val.type == '4') {
            state.symbolShow = val.data
        } else if (val.type == '5') {
            state.toolType = val.data
        } else if (val.type == '6') {
            state.toolType = val.data
        } else if (val.type == '10') {
            state.splitNumber -= 1
            if (state.splitNumber < 1) {
                state.splitNumber -= 0.1
                if (state.splitNumber < 0.1) {
                    state.splitNumber = 0.1
                }
            }
        } else if (val.type == '12') {
            state.toolType = val.type
        } else if (val.type == 'legend') {
            let arr = []
            state.attrObj = val.attrObj
            state.attrList = val.data
            state.nameListstatusList = val.data
            state.pointIdList = val.data.map(item => {
                if (item.curlSwitchNodes) {
                    arr.push(...item.curlSwitchNodes)
                }
                return item.pointId
            })
            state.nameListstatus = arr
        } else if (val.type == 'legendshow') {
            state.lengedList=val.data
            state.pointIdList = val.data.map(item => {
                return item.pointId
            })
            state.nodataShow = false
        } else if (val.type == '13') {
            state.toolType = val.type
        }
    }
    // 查看曲线按钮
    function lookLineClick(row) {
        if (state.type == 0) {
            router.push({
                path: '/qx/qx_alarmChart',
                query: {
                    pointIds: row.pointId,
                    startTime: row.alarmStartTime,
                    endTime: row.alarmEndTime
                }
            })
        } else if (state.type == 1) {
            router.push({
                path: '/qx/qx_cutChart',
                query: {
                    pointIds: row.pointId,
                    startTime: row.cutStartTime,
                    endTime: row.cutEndTime
                }
            })
        } else {
            router.push({
                path: '/qx/qx_kuidianChart',
                query: {
                    pointIds: row.pointId,
                    startTime: row.feedStartTime,
                    endTime: row.feedEndTime
                }
            })
        }
        state.showToolList = true
    }
    // 获取表格数据
    function tableList(startTime, endTime) {
        let data = {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime
        }
        state.tabList.forEach((item, index) => {
            axios.post(item.dataUrl, data).then(res => {
                if (index == 0) {
                    state.tabledata = res.data.list
                }
                item.tableData = res.data.list
                item.num = res.data.list.length
            })
        })
        state.tabledata = state.tabList[0].tableData
    }
    // 列表tab切换
    function tabClick(item) {
        state.tabledata = item.tableData
        state.type = item.type
        if (item.type == 0) {
            setTimeout(() => {
                state.tableheadsValue = computed(() => table_headers.hisAlarmLineTable)
            }, 300)
        } else if (item.type == 1) {
            setTimeout(() => {
                state.tableheadsValue = computed(() => table_headers.hisCutLineTable)
            }, 300)
        } else {
            setTimeout(() => {
                state.tableheadsValue = computed(() => table_headers.hisFeedLineTable)
            }, 300)
        }
    }
    // 获取模拟量表格数据
    function getTableList(startTime, endTime) {
        axios.post('/pointData/hisSwitchStateTable', {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime,
        }).then(res => {
            if (res.data.length > 0) {
                state.typetwo = res.data[0].pointId
                state.tabledatatwo = res.data[0].hisSwitchStateTableDetails
                state.tabListtwo = res.data
            }
        })
    }

    function tabClicktwo(item) {
        state.tabledatatwo = item.hisSwitchStateTableDetails
        state.typetwo = item.pointId
    }
    onMounted(()=>{
        // localStorage.removeItem('compareChart')
        let hisChartStore=JSON.parse(localStorage.getItem('compareChart'))
        if(hisChartStore!=null){
            state.nodataShow = false
            state.pointIdList = hisChartStore.lengedList.map(item=>{
                return item.pointId
            })
            state.lengedList=hisChartStore.lengedList
            state.timeRangevalue=[hisChartStore.startTime, hisChartStore.endTime]
            getList(hisChartStore.startTime, hisChartStore.endTime)
            getstatusList(hisChartStore.startTime, hisChartStore.endTime)
            tableList(hisChartStore.startTime, hisChartStore.endTime)
            getTableList(hisChartStore.startTime, hisChartStore.endTime)
        }else{
            state.nodataShow = true
        }
    })
</script>
<style lang="scss" scoped>
    .pagestyle {
        overflow-y: auto;

        .cardBox {
            padding: 10px;
            margin: 10px;
            border-radius: 8px;
            margin-top: 10px;
            background-color: rgba($color: #ffffff, $alpha: .6)
        }
    }
</style>